/* SPDX-License-Identifier: Apache-2.0 */

/*
  Panel for filtering search results.
  On smaller resolutions, this panel is:
    - hidden by default
    - styled with a blue background and white content
    - shown over other content after being launched by a button

  <div class="filter-panel">
    <button type="button" class="filter-panel__close -js-close-panel" aria-label="Close panel">
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
    // Panel content here
  </div>
*/

.filter-panel {
  &__close {
    display: none;
  }

  @media only screen and (max-width: $desktop) {
    display: none;
    margin: 0;
    padding: 25px;
    overflow: auto;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    background-color: $primary-color;
    width: 300px;
    max-width: 100%;
    z-index: index($z-index-scale, "filter-panel");

    &__close {
      display: inline-block;
      @include dismiss-button;
      color: $white;
      @include link-focus-state($white);
    }

    h2,
    label,
    a {
      color: $white;
    }

    a {
      color: $white;
      @include white-underlined-link;
    }
  }
}
